<template>
  <div class="register_bg">
    <el-form class="register_form" label-width="80px" ref="registerForm" :model="registerForm">
      <h3>注册博客系统</h3>
      <el-form-item label="用户名">
        <el-input
            v-model="registerForm.username"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            v-model="registerForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
            v-model="registerForm.re_password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input
            v-model="registerForm.nickname"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
            v-model="registerForm.email"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input
            v-model="registerForm.phone"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
            v-model="registerForm.address"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0xp">
        <el-button type="primary" @click="register">注册</el-button>
        <el-button @click="$router.replace('/login')">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        re_password: "",
        email: "",
        nickname: "",
        address: "",
        phone: ""
      }
    }
  },
  methods: {
    register() {
      if (this.registerForm.password !== this.registerForm.re_password) {
        alert("两次输入的密码不一致")
        return
      }
      this.$axios.post('register', {
        username: this.registerForm.username,
        password: this.registerForm.password,
        nickname: this.registerForm.nickname,
        phone: this.registerForm.phone,
        email: this.registerForm.email,
        address: this.registerForm.address,
      }).then(success => {
        if (success.data.code === 200) {
          alert("注册成功")
          this.$router.replace('/login')
        } else {
          alert(success.data.message)
        }
      }).catch(fail => {
        console.log(fail)
      })
    }
  }
}
</script>

<style scoped>
.register_form {
  border-radius: 20px;
  background-clip: padding-box;
  margin: 15px auto;
  width: 370px;
  padding: 15px 35px;
  background: white;
  border: 1px solid darkgray;
  box-shadow: 0 0 25px gray;
}

.register_bg {
  background: url("../assets/IMG_0015.jpeg") center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;

}

</style>
